'use strict';
import React, {Component, PropTypes} from 'react';
import './style.less';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
const BOTTOM_TIPS_HEIGHT = 42;
class SwiperBotBoxItem extends Component{
    constructor( props ) {
        super( props );
    }
    render(){
        let {row,innerWidth,width} = this.props;
        let style = row.url ? {
            backgroundImage:"url("+row.url+")"
        }:{
            backgroundColor:"white",
        };
        return (
            <td>
                <div className="item"
                     style={{marginBottom:2.5,height:innerWidth+BOTTOM_TIPS_HEIGHT,width:width}}
                     onClick={this.props.onSelectProductItem.bind(this,row.id)}>
                    <div className="pic" style={{width:innerWidth,height:innerWidth}}>
                        <div className="img" style={style}></div>
                    </div>
                    <div className="info" style={{height:36}}>
                        <nobr>{row.title}</nobr><br />
                        {
                            row.price ?
                                <b>RMB {row.price}</b>:null
                        }
                    </div>
                </div>
            </td>
        )
    }
}

class SwiperBotBoxInner extends Component {
    constructor( props ) {
        super( props );
    }
    render(){
        let {items,centerWidth} = this.props;
        let width = centerWidth / 3 - 2.5 ;
        let innerWidth = width;
        let type = this.props.type ? this.props.type : 3;
        return (
            <table className="bot_items" style={{width:this.props.centerWidth}}>
                <tbody>
                <tr>
                    {
                        items.slice(0,3).map((row,i)=>{
                            return (
                                <SwiperBotBoxItem
                                    key={i}
                                    innerWidth={innerWidth}
                                    width={width}
                                    onSelectProductItem={this.onSelectProductItem}
                                    row={row}/>
                            )
                        })
                    }
                </tr>
                {
                    type === 6 ?
                        <tr>
                            {
                                items.slice(3).map((row,i)=>{
                                    return (
                                        <SwiperBotBoxItem
                                            key={i}
                                            innerWidth={innerWidth}
                                            width={width}
                                            onSelectProductItem={this.onSelectProductItem}
                                            row={row}/>
                                    )
                                })
                            }
                        </tr>:null
                }
                </tbody>
            </table>

        )
    }
    onSelectProductItem(productId){
        if(productId){
            if(typeof Tida !== "undefined"){
                Tida.detail(productId);
            }
        }
    }
}

export default class SwiperBotBox extends Component {
    constructor( props ) {
        super( props );
    }
    render(){
        let {scrollTo,activeIndex} = this.props;

        let type = this.props.type ? this.props.type : 3;
        let width = this.props.centerWidth / 3 - 2.5 ;
        let height = width + BOTTOM_TIPS_HEIGHT;
        let style = {
            display:"block",
            overFlow:"hidden",
            height:parseInt(type) ==  6 ? (height*2) : height
        };
        return (
            <ReactCSSTransitionGroup
                style={style}
                transitionName={"fade"}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={0} >
                <SwiperBotBoxInner {...this.props} key={activeIndex} />
            </ReactCSSTransitionGroup>
        )
    }
}
